<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="import.jsp" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="优质女装...">
    <meta name="keywords" content="女装，服饰...">
    <title>CASEY女装官方网站——重新演绎精湛工艺与优雅皮革</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?hr7bri');
            src: url('fonts/icomoon.eot?hr7bri#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?hr7bri') format('truetype'),
                url('fonts/icomoon.woff?hr7bri') format('woff'),
                url('fonts/icomoon.svg?hr7bri#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
</head>

<link rel="shortcut icon" href="../Imgs/logo.ico" type="image/x-icon">
<link rel="stylesheet" href="../CSS/initialization.css">
<link rel="stylesheet" href="../CSS/clotheStyle.css">

<body>
<!-- 	获取登录用户用户名 -->
	<%
		request.setCharacterEncoding("UTF-8");
		String username=String.valueOf(session.getAttribute("username"));
	%>
	
    <!-- 导航栏 -->
    <div class="background">
        <div class="nav">
            <div class="kindsBox" style="width:400px;">
                <ul>
                    <li><a href="clothePage.jsp" style="font-size:16px;border-bottom:1px solid white;">服装系列</a></li>
                    <li><a href="bagPage.jsp">手袋</a></li>
                    <li><a href="otherPage.jsp">配饰</a></li>
                </ul>
            </div>
            <div class="title" onclick="backToHomepage()">CASEY</div>
            <div class="guideBox" style="width:400px;">
                <ul>
                    <li><a class="guideBoxA" href="#"><%if(username!=null && username!="null"){out.println("<a href='#' style='color:rgb(150,0,0);font-size:15px;'><span class='icomoon' style='line-height:100%;'></span> &nbsp;"+username+"</a><a href='index.jsp' style='color:rgb(150,0,0);margin-left:20px;'><span class='icomoon'></span></a>");}else{out.println("<a href='index.jsp'><span class='icomoon' style='line-height:100%;''></span> 登录/注册</a>");}%></a></li>
                    <li><a class="guideBoxA" href="likePage.jsp">我的收藏</a></li>
                    <li><a class="guideBoxA" href="#">购物袋</a></li>
                </ul>
            </div>
        </div>

    </div>

    <div class="clotheContainer">
        <table border="0" class="clotheContainerTabel" cellspacing="0">
<!--         	获取商品信息 -->
			<%
        	productMapper productMapper=sqlsession.getMapper(productMapper.class);
			String kind="clothe";
			List<product> product=productMapper.selectProductInfoByKind(kind);
			int product_id=0;String name="";int price=0;int count=1;String img1="";
        	try{
        		for(product s:product){
        			if(s.getKind().trim().contentEquals(kind)){
        				product_id=s.getProduct_id();
        				name=s.getName().trim();
        				price=s.getPrice();
        				List<product_img> product_img=productMapper.selectProductImgById(product_id);
        				for(product_img x:product_img){
        					img1=x.getImg1().trim();
        				}
        				String a="homePage.jsp";
        				out.println("<td><span class='like'></span><img class='clotheImg' src='../productsImgs/CLOTHE/"+img1+".jpg'><div class='detailContainer'><span class='detailName'>"+name+"</span><span class='detailPrice' style='color:rgb(153, 153, 153);font-size:16px;'>￥ "+price+"</span><span style='border-bottom-right-radius:20px;border-bottom-left-radius:20px;'><a target='_blank' href='productInfo.jsp?product_id="+product_id+"' style='border-bottom:1px solid cyan;'>立即购买<span class='icomoon'></span></a></span></div></td>");
        				if(count%4==0){
        					out.println("</tr><tr>");
        				}
        				count++;
        			}
        		}
        	}catch(Exception e){
        		System.out.println("数据错误");
        	}
			%>
        </table>
    </div>

    <div id="footer" class="footer">
        <ul>
            <li class="dt">专属服务</li>
            <li class="dd">免费标准配送</li>
            <li class="dd">免费礼品包装</li>
            <li class="dd" style="margin-bottom:50px;">预约门店服务</li>
            <li class="dt">需要帮助？</li>
            <li class="dd">联系我们</li>
            <li class="dd">常见问题</li>
        </ul>
        <ul>
            <li class="dt">购物帮助</li>
            <li class="dd">支付相关</li>
            <li class="dd">配送</li>
            <li class="dd">退换货</li>
            <li class="dd">发票</li>
            <li class="dd">保养与维修</li>
        </ul>
        <ul>
            <li class="dt">关于公司</li>
            <li class="dd">关于CASEY</li>
            <li class="dd">道德规范</li>
            <li class="dd">职业发展</li>
            <li class="dd">细则与条款</li>
            <li class="dd">隐私与COOKIE</li>
            <li class="dd">企业信息</li>
        </ul>
        <ul>
            <li class="dt">关注CASEY</li>
            <li class="dd">微信</li>
            <li class="dd">抖音</li>
            <li class="dd">腾讯视频</li>
            <li class="dd" style="margin-bottom:50px;">小红书</li>
            <li class="dt">在线顾问</li>
            <li class="dd"><span class="icomoon"></span>17816752712</li>
        </ul>
        <ul>
            <li class="dt">订阅CASEY电子资讯</li>
            <li class="dd">通过订阅，即代表您接受CASEY<em style="color:blue;text-decoration:underline;">隐私政策条款</em></li>
            <li class="dd" style="margin-bottom:50px;position:relative;"><input type="text" placeholder="电子邮件地址 "
                    style="width:200px;"><span class="icomoon"
                    style="position:absolute;right:80px;line-height:30px;"></span>
            </li>
            <li class="dt">直营店查询</li>
            <li class="dd" style="position:relative;">
                <input type="text" placeholder="请选择省" style="margin-right:30px;"><span class="icomoon"
                    style="position:absolute;left:100px;line-height:30px;"></span>
                <input type="text" placeholder="请选择市"><span class="icomoon"
                    style="position:absolute;right:10px;line-height:30px;"></span>
            </li>
        </ul>
    </div>

</body>

<script>

    var title = document.querySelector(".title");
    var nav = document.querySelector(".nav");

    // 随着滚轮下滑，标题变小
    window.addEventListener('scroll', scroll);
    function scroll() {
        const scrollY = window.scrollY;
        if (scrollY > 0) {
            nav.style.marginTop = "50px";
            if (200 - scrollY / 1.5 > 100) {
                title.style.fontSize = 200 - scrollY / 1.5 + "px";
                nav.style.transform = "translateY(-" + scrollY / 2 + "px)";
            } else {
                nav.style.transform = "";
            }
            if (scrollY > 300) {
                nav.style.marginTop = "0px";
                window.onmousewheel = temp;
            } else {
                nav.classList.remove("navSpecial");
                title.classList.remove("titleSpecial");
            }
        } else {
            nav.classList.remove("navSpecial");
            title.classList.remove("titleSpecial");
            nav.classList.add("navSpecialHide");
        }
    }

    // 鼠标滚轮上滑（下滑）显示（隐藏）导航栏
    function temp(e) {
        if (e.wheelDelta) {
            if (window.scrollY > 300) {
                if (e.wheelDelta > 0) {
                    nav.classList.add("navSpecial");
                    title.classList.add("titleSpecial");
                } else {
                    nav.style.marginTop = "100px";
                    nav.classList.remove("navSpecial");
                    title.classList.remove("titleSpecial");
                }
            }
        }
    }
	
//     点击标题返回主页
	function backToHomepage(){
		window.location.href="homePage.jsp";
	}

</script>

</html>